<template>
  <view class="uni-container">
    <uni-forms ref="form" :model="formData" validateTrigger="bind" :label-width="100">
	  <view class="uni-title">产品信息</view>
      <uni-forms-item name="category_id" label="产品分类" required>
        <uni-data-picker v-model="formData.category_id" collection="mydb-product-categories" field="name as text, _id as value"></uni-data-picker>
      </uni-forms-item>
      <uni-forms-item name="title" label="产品名称" required>
        <uni-easyinput placeholder="产品名称" v-model="formData.title" trim="both"></uni-easyinput>
      </uni-forms-item>
	  <uni-forms-item name="avatar" label="产品图片" required>
	    <uni-file-picker return-type="object" v-model="formData.avatar"></uni-file-picker>
	  </uni-forms-item>
      <uni-forms-item name="content" label="产品内容" required>
		  <usp-tinymce ref="matter" :isHtml="true" v-model="formData.content" :width="860" :height="360" />
      </uni-forms-item>
	   <uni-forms-item name="channel" label="产品渠道" required>
	          <uni-easyinput placeholder="产品渠道" v-model="formData.channel" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="limit" label="产品期限" required>
	          <uni-data-checkbox v-model="formData.limit" :localdata="formOptions.limit_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="quota" label="额度" required>
	          <uni-data-checkbox v-model="formData.quota" :localdata="formOptions.quota_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="returnWay" label="还款方式" required>
	          <uni-data-checkbox v-model="formData.returnWay" :localdata="formOptions.returnWay_localdata"></uni-data-checkbox>
	        </uni-forms-item>
			<view class="uni-title">申请条件</view>
	        <uni-forms-item name="ageLimit" label="年龄区间" >
	          <uni-easyinput placeholder="年龄区间" v-model="formData.ageLimit" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="taxLimit" label="税率区间">
	          <uni-easyinput placeholder="税率区间" v-model="formData.taxLimit" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="register" label="户籍要求">
	          <uni-data-checkbox v-model="formData.register" :localdata="formOptions.register_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="examine" label="审批时间">
	          <uni-data-checkbox v-model="formData.examine" :localdata="formOptions.examine_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="apply" label="申请方式">
	          <uni-data-checkbox v-model="formData.apply" :localdata="formOptions.apply_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="security" label="社保要求">
	          <uni-data-checkbox v-model="formData.security" :localdata="formOptions.security_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="accumulation" label="公积金">
	          <uni-data-checkbox v-model="formData.accumulation" :localdata="formOptions.accumulation_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="insurance" label="保单">
	          <uni-data-checkbox v-model="formData.insurance" :localdata="formOptions.insurance_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="salary" label="代发工资">
	          <uni-data-checkbox v-model="formData.salary" :localdata="formOptions.salary_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="house" label="按揭房">
	          <uni-data-checkbox v-model="formData.house" :localdata="formOptions.house_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="houseSelf" label="全款房">
	          <uni-data-checkbox v-model="formData.houseSelf" :localdata="formOptions.houseSelf_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="car" label="车辆">
	          <uni-data-checkbox v-model="formData.car" :localdata="formOptions.car_localdata"></uni-data-checkbox>
	        </uni-forms-item>
			<view class="uni-title">其他要求</view>
	        <uni-forms-item name="taxLevel" label="纳税等级">
	          <uni-data-checkbox v-model="formData.taxLevel" :localdata="formOptions.taxLevel_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="taxInfo" label="纳税情况">
	          <uni-data-checkbox v-model="formData.taxInfo" :localdata="formOptions.taxInfo_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="taxAmount" label="纳税金额">
	          <uni-easyinput placeholder="纳税金额" v-model="formData.taxAmount" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="invoice" label="开票情况">
	          <uni-data-checkbox v-model="formData.invoice" :localdata="formOptions.invoice_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	        <uni-forms-item name="water" label="流水要求">
	          <uni-easyinput placeholder="流水要求" v-model="formData.water" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="unionpay" label="银联收款">
	          <uni-easyinput placeholder="银联收款" v-model="formData.unionpay" trim="both"></uni-easyinput>
	        </uni-forms-item>
	        <uni-forms-item name="credit" label="征信要求">
	          <uni-data-checkbox v-model="formData.credit" :localdata="formOptions.credit_localdata"></uni-data-checkbox>
	        </uni-forms-item>
	  <uni-forms-item name="labels" label="产品标签">  
		<button  class="uni-button" style="width: 100px;margin-bottom: 10px;" @click="addLabel">新增</button>
		<view class="uni-flex uni-flex-wrap" v-for="(item,index) in formData.labels" :index="index" :key="index" style="margin-bottom: 10px; margin-right: 10px;display: flex; align-items: center;">
 			<uni-easyinput placeholder="产品标签" v-model="formData.labels[index]" trim="both"  :style="{width: '100px',marginRight: '10px'}">
			</uni-easyinput>
			<button  class="uni-button" style="width: 100px;" @click="deleteLabel(index)" >删除</button>
		</view>
	   
	  </uni-forms-item>
      <uni-forms-item name="article_status" label="产品状态">
        <uni-data-checkbox v-model="formData.article_status" :localdata="formOptions.article_status_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
  import { validator } from '../../js_sdk/validator/mydb-product-list.js';
  import options from './options.js'
  const db = uniCloud.database();
  const dbCmd = db.command;
  const dbCollectionName = 'mydb-product-list';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.includes(key)) {
        result[key] = validator[key]
      }
    }
    return result
  }

  

  export default {
    data() {
      let formData = {
        "user_id": "",
        "category_id": "",
        "title": "",
        "content": "",
        "excerpt": "",
		"channel": "",
		"limit": 1,
		"quota": 1,
		"returnWay": 1,
		"ageLimit": "",
		"taxLimit": "",
		"register": 1,
		"examine": 1,
		"apply": 1,
		"security": 1,
		"accumulation": 1,
		"insurance": 1,
		"salary": 1,
		"house": 1,
		"houseSelf": 1,
		"car": 1,
		"taxLevel": 1,
		"taxInfo": 1,
		"taxAmount": "",
		"invoice": 1,
		"water": "",
		"unionpay": "",
		"credit": 1,
        "article_status": 1,
		"labels":[],
        "avatar": null
      }
      return {
        formData,
        formOptions: {
			...options
        },
        rules: {
          ...getValidator(Object.keys(formData))
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      addLabel(){
		  this.formData.labels.push('')
	  },
	  deleteLabel(index){
		  this.formData.labels.splice(index, 1)
	  },
      /**
       * 验证表单并提交
       */
      submit() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then((res) => {
          return this.submitForm(res)
        }).catch(() => {
        }).finally(() => {
          uni.hideLoading()
        })
      },

      /**
       * 提交表单
       */
      submitForm(value) {
        // 使用 clientDB 提交数据
        return db.collection(dbCollectionName).add(value).then((res) => {
          uni.showToast({
            title: '新增成功'
          })
          this.getOpenerEventChannel().emit('refreshData')
          setTimeout(() => uni.navigateBack(), 500)
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        })
      }
    }
  }
</script>
<style scoped>
.uni-title{
	font-size: 20px;
	font-weight: bold;
	color: #333;
	margin-bottom: 20px;
}
</style>
